<template>
	<view>
		<!-- 导航 -->
		<view class="nav">
			<view class="nav-bar" @click="toggle(1)">
				<view class="nav-bar-text"
					:class="orderstype==0 || orderstype==1 || orderstype==2?'nav-bar-text-active':''">
					进行中
				</view>
				<view class="nav-bar-line"
					:class="orderstype==0 || orderstype==1 || orderstype==2?'nav-bar-line-active':''"></view>
			</view>
			<view class="nav-bar" @click="toggle(3)">
				<view class="nav-bar-text" :class="orderstype==3||orderstype==4?'nav-bar-text-active':''">
					历史
				</view>
				<view class="nav-bar-line" :class="orderstype==3||orderstype==4?'nav-bar-line-active':''"></view>
			</view>
			<view class="nav-bar" @click="toggle(5)">
				<view class="nav-bar-text" :class="orderstype==5?'nav-bar-text-active':''">
					退单
				</view>
				<view class="nav-bar-line" :class="orderstype==5?'nav-bar-line-active':''"></view>
			</view>
		</view>
		<!-- 导航 -->

		<!-- 没有订单显示背景及链接按钮 -->
		<view class="no-orders" v-if="searchordersList.length<=0">
			<view class="no-orders-bg">
				<image src="http://www.itlaobing.com/ice/other/ordersbg.png"></image>
			</view>
			<view class="no-orders-text">
				您还没有订单，快去选一杯喜欢的饮品吧~
			</view>
			<view class="no-orders-btn" @click="toOrders">
				去喝一杯
			</view>
		</view>
		<!-- 没有订单显示背景及链接按钮 -->

		<!-- 订单列表 -->
		<view class="orderlist">
			<view class="orderlist-item" v-for="(item,index) in searchordersList" :key="index"
				@click="toOrderDetail(item)">
				<view class="orderlist-item-top">
					<view class="orderlist-item-top-shopname" @click.stop="toFoods(item)">{{item.shop.sname}}
						<uni-icons type="forward" size="18" color="#444444"></uni-icons>
					</view>
					<view :class="item.orderstatus<3?'orderlist-item-top-status1':'orderlist-item-top-status2'">
						{{item.orderstatusStr}}
					</view>
				</view>
				<view class="orderlist-item-goods">
					<view class="orderlist-item-goods-v" v-for="(goods,sindex) in item.goods" :key="sindex">
						<image :src="goods.icon" class="orderlist-item-goods-img"></image>
					</view>
				</view>
				<view class="orderlist-item-bottom">
					<view class="orderlist-item-bottom-text">{{item.ordertime}}</view>
					<view class="orderlist-item-bottom-text"
						v-if="item.orderstatus==1 || item.orderstatus==2 ||item.orderstatus==3 ">取餐号码：{{item.takeCode}}
					</view>
					<view style="display: flex;">
						<text class="orderlist-item-bottom-text">共{{item.buyTotalNums}}件</text><text
							class="orderlist-item-bottom-totalprice">￥{{item.allPrice}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单列表 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderstype: 1, //1.进行中 3.历史 5.退单
				ordersList: [],
				searchordersList: [],
				optiontype: 1 //1.消费者 2.工作人员 3.超级管理员
			}
		},
		onLoad(params) {
			if (params.orderstype != undefined && params.orderstype != null) {
				this.orderstype = params.orderstype
			}
			if (params.optiontype != undefined && params.optiontype != null) {
				this.optiontype = params.optiontype
			}
			// 获得订单信息
			this.getOrdersList()
		},
		methods: {
			getOrdersList() {
				// 获得订单信息
				uni.request({
					url: getApp().globalData.baseUrl + '/orders/getorderslist/' + getApp().globalData.cid,
					success: (result) => {
						// console.log(result.data.data)
						if (result.data.statusCode == 200 && result.data.mydata != null) {
							this.ordersList = result.data.mydata.reverse()
							this.toggle(this.orderstype)
						}
					}
				})
			},
			timeinit(curOrder) {
				var date = new Date();
				var now = date.getTime();
				var startTimeStr = curOrder.ordertime
				var startTime = new Date(startTimeStr).getTime() //获得当前时间与1970年1月1日时间相差的毫秒数
				var endTime = startTime + 1000 * 60 * 30; //结束时间与1970年1月1日时间相差的毫秒数 + 30分钟
				var leftTime = endTime - now; //计算两日期之间相差的毫秒数
				var myLeftTime = {}
				if (leftTime >= 0)
					return true
				else return false

			},
			toggle(orderstype) {
				this.orderstype = orderstype
				if (orderstype == 1) { //显示状态值为 0.待支付 1.已支付 2.制作中  的数据
					this.searchordersList = this.ordersList.filter(item => item.orderstatus <= 2)
					// 如果有待支付订单，看看是否支付时间超时，如果有订单取消
					this.searchordersList.forEach(item => {
						if (item.orderstatus == 0) {
							if (!this.timeinit(item)) {
								item.orderstatus = 4
								item.orderstatusStr = "已取消"
								item.paytime = ""
								item.takeCode = -1
								// 更新订单
								uni.request({
									url: getApp().globalData.baseUrl + '/orders/updateorders',
									method: 'POST',
									data: item,
									success: (result) => {

									}
								})
							}
						}
					})
				} else if (orderstype == 3 || orderstype == 4) {
					this.searchordersList = this.ordersList.filter(item => (item.orderstatus == 3 || item.orderstatus ==
						4))
				} else {
					this.searchordersList = this.ordersList.filter(item => item.orderstatus == 5)
				}
			},
			toOrders() {
				uni.switchTab({
					url: "../shops/shops"
				})
			},
			//转向购物页面并带走门店sid
			toFoods(item) {
				uni.navigateTo({
					url: "../foods/foods?sid=" + item.shop.sid
				})
			},
			toOrderDetail(item) {
				if (this.optiontype == 1) {
					uni.navigateTo({
						url: "../orderdetail/orderdetail?orderid=" + item.orderid
					})
				} else if (this.optiontype == 2) { //工作人员
					uni.navigateTo({
						url: "../adminorderdetail/adminorderdetail?orderid=" + item.orderid
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.nav {
		width: 100vw; //viewpoint width
		height: 60rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-around;
		position: sticky;
		top: var(--window-top);
		z-index: 10;

		.nav-bar {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;

			.nav-bar-text {
				color: #777777;
				font-size: 30rpx;
				box-sizing: border-box;
				margin-bottom: 10rpx;
			}

			.nav-bar-text-active {
				color: #333333;
			}

			.nav-bar-line {
				width: 62rpx;
				height: 6rpx;
			}

			.nav-bar-line-active {
				width: 62rpx;
				height: 6rpx;
				background-color: #FF0000;
			}
		}
	}

	.no-orders {
		width: 80vw;
		height: 650rpx;
		margin: 0rpx auto;
		margin-top: 100rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;

		.no-orders-bg {
			width: 100%;
		}

		.no-orders-text {
			color: #777777;
			font-size: 28rpx;
		}

		.no-orders-btn {
			width: 240rpx;
			height: 80rpx;
			background-color: #E60012;
			color: #FFFFFF;
			line-height: 80rpx;
			border-radius: 10rpx;
		}
	}

	.orderlist {
		width: 93vw;
		height: auto;
		margin: 20rpx auto;

		.orderlist-item {
			width: 100%;
			height: 270rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 15rpx;
			box-sizing: border-box;
			padding: 20rpx;

			.orderlist-item-top {
				width: 100%;
				height: 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.orderlist-item-top-shopname {
					color: #444444;
					font-size: 28rpx;
					display: flex;
					align-items: center;
				}

				.orderlist-item-top-status1 {
					color: #E60012;
					font-size: 28rpx;
				}

				.orderlist-item-top-status2 {
					color: #AAAAAA;
					font-size: 28rpx;
				}
			}

			.orderlist-item-goods {
				width: 100%;
				height: 150rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: center;

				.orderlist-item-goods-v {
					width: 110rpx;
					height: 120rpx;

					.orderlist-item-goods-img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.orderlist-item-bottom {
				width: 100%;
				height: 35rpx;
				display: flex;
				justify-content: space-between;

				.orderlist-item-bottom-text {
					color: #BBBBBB;
					font-size: 22rpx;
				}

				.orderlist-item-bottom-totalprice {
					font-size: 26rpx;
					color: #444444;
				}
			}
		}
	}
</style>
